//type
import * as echarts from "echarts";
import china from "@/assets/china.json";
import { cloneDeep } from "lodash";
import { ref } from "vue";
interface dataSourceType {
  [propName: string]: any;
}
const chinadata = ref<any>(cloneDeep(china));
echarts.registerMap("china", chinadata.value);


const optionArea: dataSourceType = {
  layoutCenter: ["55%", "70%"], //位置
  layoutSize: "120%", //大小
  aspectScale: 0.7, //宽高比
  // 进行相关配置
  tooltip: {}, // 鼠标移到图里面的浮动提示框
  // visualMap: {
  //   //左侧小柱子的配置
  //   min: 0, // 最小值
  //   max: 100, //最大值
  //   left: "left", // 定位左边
  //   top: "bottom", // 定位底部
  //   text: ["高", "低"], // 上下两个文字
  //   seriesIndex: [1],
  //   inRange: {
  //     color: ["#C4E1FF", "#73ADFF", "#4A8FFF", "#1F6BF7"],
  //   },
  //   calculable: true, // 显示与否
  // },
  visualMap: {
    type: "piecewise",
    showLabel: true,
    pieces: [
      { min: 90, label: "≥90" },
      { min: 60, max: 89, label: "60-89" },
      { min: 30, max: 59, label: "30-59" },
      { min: 0, max: 29, label: "0-29" },
    ],
    inRange: {
      color: ["#C4E1FF", "#73ADFF", "#4A8FFF", "#1F6BF7"],
    },
    seriesIndex: [1],
    left: 0,
    bottom: 10,
    textStyle: {
      color: "#8483c0",
    },
    calculable: true,
  },

  geo: {
    // 这个是重点配置区
    map: "china", // 表示中国地图
    roam: true,
    label: {
      layoutCenter: ["10%", "30%"],
      normal: {
        show: false, // 是否显示对应地名
        textStyle: {
          color: "rgba(0,0,0,0.4)",
        },
      },
    },
    // regions: [
    //   {
    //     name: "南海诸岛",
    //     itemStyle: {
    //       // 隐藏地图
    //       normal: {
    //         opacity: 0, // 为 0 时不绘制该图形
    //       }
    //     },
    //     label: {
    //       show: false // 隐藏文字
    //     }
    //   }
    // ],

    itemStyle: {
      normal: {
        borderColor: "rgba(0, 0, 0, 0.2)",
      },
      emphasis: {
        areaColor: null,
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        shadowBlur: 20,
        borderWidth: 0,
        shadowColor: "rgba(0, 0, 0, 0.5)",
      },
    },
  },
  series: [
    {
      type: "scatter",
      coordinateSystem: "geo", // 对应上方配置
    },
    // {
    //   name: "启动次数", // 浮动框的标题
    //   type: "map",
    //   geoIndex: 0,
    //   data: [{ name: "海南省", code:'111000', value: 52 },{ name: "广东省", code:'111000', value: 52 },{ name: "广东省", code:'111000', value: 52 }], // 这里就是数据，即数组可以单独放在外面也可以直接写
    // },
  ],
};
const optionpieHalfDonut = {
  tooltip: {
    formatter: '{a} <br/>{b} : {c}%'
  },
  series: [
    {
      name: '访客数',
      type: 'gauge',
      progress: {
        show: true,
        width: 10
      },
      axisLine: {
        lineStyle: {
          width: 10
        }
      },
      splitLine: {
        length: 5,
        lineStyle: {
          width: 2,
          color: '#999'
        }
      },
      axisLabel: {
        distance: 15,
        color: '#999',
        fontSize: 12
      },
      anchor: {
        show: true,
        showAbove: true,
        size: 14,
        itemStyle: {
          borderWidth: 6
        }
      },
      detail: {
        valueAnimation: true,
        fontSize: 20,
        formatter: '{value}'
      },
      data: [
        {
          value: 50,
          name: '老客户'
        }
      ]
    }
  ]

};
const optionLine: dataSourceType = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [],
      type: 'line',
      smooth: true
    }
  ]
};
const optionsPie = {
  title: {
    text: '',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },

  series: [
    {
      name: '',
      type: 'pie',
      radius: '50%',
      data: [],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
}
const optionsBar = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: [],
      axisTick: {
        alignWithLabel: true
      },

    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Direct',
      type: 'bar',
      data: [],
      barMaxWidth: 40,
    }
  ]
}
export { optionpieHalfDonut, optionLine, optionArea, optionsPie, optionsBar }